<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平标签页</title>
    <style>
      .tabs {
        width: 800px;
        margin: 50px auto;
      }
      .tabs-nav {
        display: flex;
      }
      .tab {
        margin: 0 16px;
        line-height: 48px;
      }
      .tab-active {
        color: #1677ff;
        border-bottom: 2px solid #1677ff;
      }
      .tab:hover {
        cursor: pointer;
        color: #1677ff;
        border-bottom: 2px solid #1677ff;
      }
      .tabs-content {
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <div class="tabs">
      <div class="tabs-nav">
        <div class="tab tab-active" data-pane-key="pane1">页签-1</div>
        <div class="tab" data-pane-key="pane2">页签-2</div>
      </div>
      <div class="tabs-content">
        <div id="pane1">页板-1</div>
        <div id="pane2" hidden>页板-2</div>
      </div>
    </div>
    <script>
      const tabs = document.querySelector(".tabs");
      tabs.addEventListener("click", () => {
        const tab = event.target.closest(".tab");
        if (!tab || !tabs.contains(tab)) return;

        const currentActive = tabs.querySelector(".tab-active");
        if(tab === currentActive)return;
        currentActive.classList.remove("tab-active");
        tab.classList.add("tab-active");

        const currentPane = tabs.querySelector(`#${currentActive.dataset.paneKey}`);
        currentPane.hidden = true;

        const paneId = tab.dataset.paneKey;
        const pane = tabs.querySelector(`#${paneId}`);
        pane.hidden = false;
      });
    </script>
  </body>
</html>
